<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>父组件向子组件传递信息</title>
  </head>
  <body>
    <div id="app">
      <!-- <cpn v-bind:cmovies="movies" :cmessage="message"></cpn> -->
      <cpn v-bind:cmovies="movies"></cpn>
    </div>
    <template id="cpn">
      <div>
        <p>{{cmovies}}</p>
        <p>{{cmessage}}</p>
      </div>
    </template>
    <script src="../vue.js"></script>
    <script>
      //父传子：props
      const cpn = {
        template: "#cpn",
        //props: ["cmovies", "cmessage"],
        props: {
          //1.类型限制;
          //cmovies:Array
          //cmessage:String
          //2.提供一些默认值
          cmessage: {
            type: String,
            default: "aaaaa",
            require: true, //一旦require为true，表示必须传值
          },
          //类型是对象或者数组时，默认值必须是一个函数
          cmovies: {
            type: Array,
            default() {
              return [];
            },
          },
        },
      };

      const app = new Vue({
        el: "#app",
        data: {
          message: "hello",
          movies: ["还往", "虹猫蓝兔", "猫和老鼠", "一条狗的使命"],
        },
        components: {
          cpn, //这个增强写法忘了
        },
      });
    </script>
  </body>
</html>
